<template>
  <div class="RightFzjkDetailsAdd">
    <el-form
      ref="elForm"
      :model="PopUpformData"
      size="medium"
      :rules="rules"
      label-width="1.2rem"
      class="popUp-from"
    >
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="变电站名称" prop="bdzmc">
            <el-select
              v-model="PopUpformData.bdzmc"
              placeholder
              clearable
              :disabled="isShow"
              :style="{ width: '100%' }"
              filterable
            >
              <el-option
                v-for="(item, index) in bdzmcxl"
                :key="index"
                :label="item.stationName"
                :value="item.stationId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <!-- <el-col :offset="1" :span="10">
          <el-form-item label="区域名称">
            <el-select
              v-model="PopUpformData.qymc"
              placeholder
              clearable
              :disabled="isShow"
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in qymcXl"
                :key="index"
                :label="item.areaName"
                :value="item.areaId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>-->
        <el-col :offset="1" :span="10">
          <el-form-item label="装置类型" prop="zzlx">
            <el-select
              v-model="PopUpformData.zzlx"
              placeholder
              clearable
              filterable
              :style="{ width: '100%' }"
            >
              <el-option
                v-for="(item, index) in substationOptions"
                :key="index"
                :label="item.jclxName"
                :value="item.jclxId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="安装位置">
            <el-input v-model="PopUpformData.azwz"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="装置名称">
            <el-input v-model="PopUpformData.zzmc"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="装置编码" prop="zzbm">
            <el-input v-model="PopUpformData.zzbm"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="运行状态" prop="status">
            <el-select v-model="PopUpformData.status" placeholder clearable>
              <el-option
                v-for="(item, index) in getRunstatusList"
                :key="index"
                :label="item.name"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="型号">
            <el-input v-model="PopUpformData.xh"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="出厂编号">
            <el-input v-model="PopUpformData.ccbh"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="出厂日期">
            <el-date-picker
              :style="{width: '100%'}"
              v-model="PopUpformData.ccrq"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              popper-class="times"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="投运日期">
            <el-date-picker
              :style="{width: '100%'}"
              v-model="PopUpformData.tyrq"
              type="datetime"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd HH:mm:ss"
              popper-class="times"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="生产厂家">
            <el-input v-model="PopUpformData.scgj"></el-input>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="备注">
            <el-input v-model="PopUpformData.bz"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="被测设备类型">
            <el-select v-model="PopUpformData.bcsblx" placeholder clearable>
              <el-option
                v-for="(item, index) in bcsblxList"
                :key="index"
                :label="item.sblxName"
                :value="item.sblxId"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :offset="1" :span="10">
          <el-form-item label="被测设备间隔">
            <el-select v-model="PopUpformData.bcsbjg" placeholder clearable>
              <el-option
                v-for="(item, index) in bcsbjgList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :offset="1" :span="10">
          <el-form-item label="关联一次/二次设备名称">
            <el-select v-model="PopUpformData.glsbmc" placeholder clearable>
              <el-option
                v-for="(item, index) in glsbmcList"
                :key="index"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="buttom-box">
        <el-button type="primary" @click="determine">确定</el-button>
        <el-button type="primary" @click="dialog">取消</el-button>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from "vue-property-decorator";
import time from "@/utils/time.js";
import { ParameterManagementModule } from "@/store/modules/ParameterManagement";
@Component
export default class extends Vue {
  @Prop() PopUptitle!: any;
  @Prop() multipleSelection!: any;
  @Prop() isShow!: any;

  //弹框表单
  public PopUpformData: any = {
    bdzmc: "",
    qymc: "",
    zzlx: "",
    zzmc: "",
    xh: "",
    status: "",
    azwz: "",
    tyrq: "",
    scgj: "",
    ccbh: "",
    ccrq: "",
    bz: "",
    zzbm: "",
    bcsblx: "",
    bcsbjg: "",
    glsbmc: "",
  };
  bdzmcxl = [];
  qymcXl = [];
  changVal: "";
  // 运行状态
  getRunstatusList = [
    {
      name: "现场留用",
      value: "31",
    },
    {
      name: "在运",
      value: "20",
    },
    {
      name: "退役",
      value: "30",
    },
  ];
  rules = {
    // stationName: [{ required: true, message: "请输入内容", trigger: "blur" }],
    // area: [{ required: true, message: "请输入内容", trigger: "blur" }],
    zzlx: [{ required: true, message: "请输入内容", trigger: "blur" }],
    zzbm: [{ required: true, message: "请输入内容", trigger: "blur" }],
  };

  substationOptions = [];
  $refs!: {
    elForm: any;
  };
  get treeSbSsdsId() {
    return ParameterManagementModule.treeSbIdName.ssdsId;
  }
  get bdzId() {
    return ParameterManagementModule.treeSbIdName.bdzId;
  }
  get parentId() {
    return ParameterManagementModule.treeSbIdName.parentId;
  }
  //弹框确定按钮
  determine() {
    this.$refs.elForm.validate((valid: any) => {
      if (!valid) {
        this.$message({
          type: "warning",
          message: "表单校验不通过",
        });
        return;
      }
      if (this.PopUptitle == "新建") {
        console.log(123);
        console.log(this.glsbmcList);
        
        var from = {
          area: (this as any).PopUpformData.qymc,
          deviceId: (this as any).PopUpformData.zzbm, //必填
          deviceName: (this as any).PopUpformData.zzmc,
          deviceType: (this as any).PopUpformData.zzlx,
          location: (this as any).PopUpformData.azwz,
          modle: (this as any).PopUpformData.xh,
          production_date: (this as any).PopUpformData.ccrq,
          production_num: (this as any).PopUpformData.ccbh,
          remark: (this as any).PopUpformData.bz,
          run_date: (this as any).PopUpformData.tyrq,
          scgj: (this as any).PopUpformData.scgj,
          stationId: (this as any).PopUpformData.bdzmc,
          status: (this as any).PopUpformData.status,
          stationName: this.bdzmcxl.filter(
            (o) => o.stationId === (this as any).PopUpformData.bdzmc
          )[0].stationName,
          equipType: (this as any).PopUpformData.bcsblx,
          jgdyId: (this as any).PopUpformData.bcsbjg,
          equipId: (this as any).PopUpformData.glsbmc,
          equipName: '', //中文
        };
        if (this.glsbmcList.length>0) {
        from.equipName= this.glsbmcList.filter(
            (o) => o.code == (this as any).PopUpformData.glsbmc
          )[0].name
        }
        // console.log(from);

        (this as any).$services
          .insertZxjcDevice({ data: from, method: "post" })
          .then((result: any) => {
            // console.log(result);
            if (result.code === 200) {
              this.$message({
                showClose: true,
                message: result.message,
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: result.message,
                type: "warning",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });
        this.$emit("determine", false);
        this.$emit("initList");
      }
      if (this.PopUptitle == "修改") {
        console.log(this.glsbmcList);
        
        var frome = {
          area: (this as any).PopUpformData.qymc,
          deviceId: (this as any).PopUpformData.zzbm, //必填
          deviceName: (this as any).PopUpformData.zzmc,
          deviceType: (this as any).PopUpformData.zzlx,
          location: (this as any).PopUpformData.azwz,
          modle: (this as any).PopUpformData.xh,
          production_date: (this as any).PopUpformData.ccrq,
          production_num: (this as any).PopUpformData.ccbh,
          remark: (this as any).PopUpformData.bz,
          run_date: (this as any).PopUpformData.tyrq,
          scgj: (this as any).PopUpformData.scgj,
          stationId: (this as any).PopUpformData.bdzmc,
          status: (this as any).PopUpformData.status,
          stationName: this.bdzmcxl.filter(
            (o) => o.stationId === (this as any).PopUpformData.bdzmc
          )[0].stationName,
          equipType: (this as any).PopUpformData.bcsblx,
          jgdyId: (this as any).PopUpformData.bcsbjg,
          equipId: (this as any).PopUpformData.glsbmc,
          equipName: '', //中文
        };
        let resultArr = this.bdzmcxl.filter((item) => {
          return item.stationId === (this as any).PopUpformData.bdzmc;
        });
        frome.stationName = resultArr[0].stationName || "";
         if (this.glsbmcList &&this.glsbmcList.length>0) {
        frome.equipName= this.glsbmcList.filter(
            (o) => o.code == (this as any).PopUpformData.glsbmc
          )[0].name
          
        }

        (this as any).$services
          .updateZxjcDevice({ data: frome, method: "post" })
          .then((result: any) => {
            if (result.code === 200) {
              this.$message({
                showClose: true,
                message: result.message,
                type: "success",
              });
            } else {
              this.$message({
                showClose: true,
                message: result.message,
                type: "warning",
              });
            }
          })
          .catch((err: object) => {
            console.log(err);
          });

        this.$emit("determine", false);
        this.$emit("initList");
      }
    });
  }
  dialog() {
    this.$emit("determine", false);
  }
  bdzxl() {
    //变电站下拉
    (this as any).$services
      .getStationList({ data: { ssds: this.treeSbSsdsId } })
      .then((result: any) => {
        this.bdzmcxl = result.data;
        // console.log(result);
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  qvmcXl() {
    console.log((this as any).PopUpformData.qymc);
    (this as any).$services
      .getDeviceMenuList({ data: { area: (this as any).PopUpformData.qymc } })
      .then((result: any) => {
        console.log(2222, result.data);
        this.qymcXl = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
  }

  bcsblxList = []; //被测设备类型
  bcsbjgList = []; //被测设备间隔
  glsbmcList = []; //关联一次/二次设备名称
  // 设备类型
  getBcSblx() {
    (this as any).$services
      .getBcSblx({ data: {} })
      .then((result: any) => {
        // console.log(result);
        if (result.data) {
          this.bcsblxList = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 间隔单元
  getJgdy() {
    let params = {
      bdzid: this.bdzId,
    };
    (this as any).$services
      .getJgdy({ data: params })
      .then((result: any) => {
        // console.log(result);
        if (result.data) {
          this.bcsbjgList = result.data;
        }
      })
      .catch((err: object) => {
        console.log(err);
      });
  }
  // 设备信息
  getJcsb() {
    if (this.PopUpformData.bcsbjg && this.PopUpformData.bcsblx) {
      let params = {
        jgid: this.PopUpformData.bcsbjg,
        sblx: this.PopUpformData.bcsblx,
      };
      (this as any).$services
        .getJcsb({ data: params })
        .then((result: any) => {
          // console.log(result);
          if (result.data) {
            this.glsbmcList = result.data;
          }
        })
        .catch((err: object) => {
          console.log(err);
        });
    } else {
      this.$message({
        type: "warning",
        message: "请先选择设备类型和间隔单元",
      });
    }
  }

  @Watch("PopUpformData", { immediate: true, deep: true })
  getglsbmcList(val) {
    console.log("val:", val);

    if (val.bcsbjg && val.bcsblx) {
      console.log(val);
      this.getJcsb();
    }
  }

  mounted() {
    (this as any).$services
      .getJclxMenuList({ data: {} })
      .then((result: any) => {
        // console.log(result);
        this.substationOptions = result.data;
      })
      .catch((err: object) => {
        console.log(err);
      });
    if (this.PopUptitle == "修改") {
      console.log(this.multipleSelection[0]);

      if ((this as any).multipleSelection[0].status) {
        (this as any).changVal = this.getRunstatusList.filter(
          (o) => o.name == (this as any).multipleSelection[0].status
        )[0].value;
      } else {
        (this as any).changVal = "";
      }
      //  this.PopUpformData = this.multipleSelection[0];deviceName
      (this as any).PopUpformData.zzmc = this.multipleSelection[0].deviceName;
      (this as any).PopUpformData.xh = this.multipleSelection[0].modle;
      (this as any).PopUpformData.azwz = this.multipleSelection[0].installposdesc;
      (this as any).PopUpformData.tyrq = this.multipleSelection[0].runDate;
      (this as any).PopUpformData.scgj = this.multipleSelection[0].madein;
      (this as any).PopUpformData.ccbh = this.multipleSelection[0].productionNum;
      (this as any).PopUpformData.ccrq = this.multipleSelection[0].productionDate;
      (this as any).PopUpformData.bz = this.multipleSelection[0].remark;
      // (this as any).PopUpformData.deviceId = this.multipleSelection[0].deviceId;
      (this as any).PopUpformData.zzlx = this.multipleSelection[0].deviceType;
      (this as any).PopUpformData.status = (this as any).changVal;
      (this as any).PopUpformData.zzbm = this.multipleSelection[0].deviceId;
      (this as any).PopUpformData.bcsblx = this.multipleSelection[0].equipType;
      (this as any).PopUpformData.bcsbjg = this.multipleSelection[0].bayId;
      this.getJcsb();
      (this as any).PopUpformData.glsbmc = this.multipleSelection[0].equipId;

      // console.log(this.PopUpformData);
    }

    this.bdzxl();
    (this as any).PopUpformData.bdzmc = this.bdzId;
    (this as any).PopUpformData.qymc = this.parentId;
    this.qvmcXl();
    // console.log((this as any).PopUpformData.qymc);
    this.getBcSblx();
    this.getJgdy();
  }
}
</script>

<style lang="scss" scoped>
.RightFzjkDetailsAdd {
  width: 100%;
  height: 100%;
}
</style>

